<template>
  <vue-modal
    title="事件配置"
    ok-text="提交审核"
    cancel-text="取消"
    :show.sync="showModal"
    effect="fade"
    :small="true"
    :width="600">
    <div slot="modal-body" class="modal-body">
      <form class="form-horizontal" role="form">
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*事件类别</label>
          <div class="col-sm-9 text-left">
            <select :disabled="actionType === 'DETAIL'" class="form-control" v-model="form.eventCategory">
              <option value="2">特别事件</option>
            </select>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*事件类型</label>
          <div class="col-sm-9 text-left">
            <select :disabled="actionType === 'DETAIL'" class="form-control" v-model="form.eventType">
              <option v-for="it in typeList" :value="it.columnValue">{{it.valueDesc}}</option>
            </select>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*开始时间</label>
          <div v-if="actionType !== 'DETAIL'" class="col-sm-9 text-left">
            <vue-date-picker
              :time.sync="form.startDt"
              :option='datePickerOption' >
            </vue-date-picker>
          </div>
          <div v-else class="col-sm-9 text-left">
            <input type="text" disabled="disabled" class="form-control" v-model="form.startDt">
          </div>
        </div>
        <!-- <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*结束时间</label>
          <div class="col-sm-9 text-left">
            <vue-date-picker
              :time.sync="form.endDt"
              :option='datePickerOption'>
            </vue-date-picker>
          </div>
        </div> -->
        <!-- <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*发布时间</label>
          <div class="col-sm-9 text-left">
            <vue-date-picker
              :time.sync="form.issueDt"
              :option='datePickerOption'>
            </vue-date-picker>
          </div>
        </div> -->
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*事件描述</label>
          <div class="col-sm-9 text-left">
            <textarea :disabled="actionType === 'DETAIL'" rows="3" class="form-control" v-model="form.eventDesc" oninput="if(value.length>70)value=value.slice(0,70)"></textarea>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label class="col-sm-3 control-label">事件链接</label>
          <div class="col-sm-9 text-left">
            <input :disabled="actionType === 'DETAIL'" type="text" class="form-control" v-model="form.eventLink">
          </div>
        </div>
        <div v-if="actionType !== 'DETAIL'" class="form-group form-group-sm">
          <label class="col-sm-3 control-label">*涉及证券</label>
          <div class="col-sm-9 text-left">
            <div class="search-code">
             <input type="text"  class="search" v-model="keyword" oninput="if(value.length>6)value=value.slice(0,6)">
              <!--下拉框-->
              <ul v-show="showStockList" class="dropdown">
                <li v-for="it in codeList" @click="selectCode(it)" class="dropdown-item">
                  <div class="code">{{it.secuCode}}</div>
                  <div>{{it.secuName}}</div>
                </li>
              </ul>
              <button class="btn btn-sm btn-primary" @click.stop.prevent="addCode">添加</button>
            </div>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <div class="wrap-table">
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>证券代码</th><th>证券名称</th><th>KPI值</th><th>操作</th>
                </tr>
              </thead>
              </tbody>
                <tr v-for="it in eventKpis">
                  <td>{{it.secuCode}}</td>
                  <td>{{it.secuName}}</td>
                  <td><input :disabled="actionType === 'DETAIL'" type="number" class="kpiValue" oninput="if(+value>5)value=5;if(+value<0)value=0" v-model="it.kpiValue"></td>
                  <td><button :disabled="actionType === 'DETAIL'" class="btn btn-sm btn-primary" @click="deleteCode(it)">删除</button></td>
                </tr>
              </tbody>
            </table>
          </div>

        </div>
      </form>
    </div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-default" @click="cancelFun(form.eventId)">取消</button>
      <button v-if="actionType !== 'DETAIL'" type="button" class="btn btn-sm btn-primary" @click="submit(form.eventId)">提交审核</button>
    </div>
  </vue-modal>
</template>
<style src="./config.css" scoped></style>
<script src="./config.js"></script>